<template>
  <div class="box">
    <ul class = "classifyUl">
      <li @click = "goDetail(item)" class="classD" v-for = "item of list" :key = "item._id">
        <figure>
          <img :src="decodeURIComponent(item.cover).substring(7)">
          <figcaption>
            <header>{{ item.title }} </header>
            <div class="shortIntro">{{ item.shortIntro }}</div>
            <div class="Tautor">
              <a class="iconfont icon-zuozhe" rel="javascript:;">{{ item.author }}</a>
              <p>
                <span>{{ item.majorCate }} </span>
                <span class="iconfont icon-kan">{{ item.latelyFollower }} </span>
              </p>
            </div>
          </figcaption>
        </figure>
      </li>
    </ul>
  </div>
</template>
<script>
import Vue from 'vue'
import { Indicator } from 'mint-ui'
Vue.use(Indicator)
export default{
  data () {
    return {
      list: []
    }
  },
  mounted () {
    console.log(this.$route.query.major, this.$route.query.gender)
    Indicator.open('加载中...')
    fetch(`/xiaoliang/category-info?gender=${this.$route.query.gender}&type=hot&major=${this.$route.query.major}&minor=&start=0&limit=500`)
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        console.log(data.books)
        this.list = data.books
        Indicator.close()
      })
  },
  methods: {
    goDetail (item) {
      this.$router.push({path: `/detail?id=${item._id}`})
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';

.classifyUl{
  padding: 0 0.1rem;
  @include overflow()
  .classD{
    @include rect(100%, 1.5rem);
    margin:0.06rem 0;
    figure{
      @include rect(100%, 1.5rem);
      @include flexbox();
      @include align-items(space-bettween);
      img{
        @include rect(1rem, auto);
      }
      figcaption{
        margin-left: 0.05rem;
        @include flexbox();
        @include flex-direction(column);
        @include justify-content(space-around);
        .shortIntro{
          height: 0.4rem;
          overflow: hidden;
          color: #cccccc
        }
        .Tautor{
          @include flexbox();
          @include justify-content(space-bettween);
          .icon-zuozhe{
            font-size: 0.12rem;
            color: black;
            margin: 0 0.03rem;
          }
        }
        p{
          font-size: 0.12rem;
          span{
            background-color:#f0eff4;
            border-radius:0.03rem;
            padding:0.05rem;
            margin:0 0.05rem;
          }
        }
      }
    }
  }
}

</style>
